<template>
  <div class="container">
    <div class="contorl">
      <el-row>
        <span
          style="
            margin-right: 20px;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
          "
          >控制台</span
        >
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-circle-plus"
          disabled
          >新增</el-button
        >
        <el-button type="success" size="mini" icon="el-icon-edit" disabled
          >修改</el-button
        >
        <el-button type="info" size="mini" icon="el-icon-refresh-left" @click="reload"
          >刷新</el-button
        >
        <el-button type="danger" size="mini" icon="el-icon-delete" disabled
          >删除</el-button
        >
      </el-row>
    </div>
    <el-table
      ref="filterTable"
      :data="list"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="user_id" label="用户ID" width="70">
      </el-table-column>
      <el-table-column prop="nick_name" label="昵称" width="70">
      </el-table-column>
      <el-table-column prop="real_name" label="姓名" width="80">
      </el-table-column>
      <el-table-column prop="work_type" label="工作类型" width="80">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="200">
      </el-table-column>
      <el-table-column prop="last_login_time" label="最后登录时间" width="200">
      </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column label="是否禁用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="user_type" label="账号类型" width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            icon="el-icon-edit"
          ></el-button> -->
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      loginToken: "",
      value: 1,
    };
  },
  methods: {
    reload(){
      this.handleCurrentChange(this.currentPage);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除用户
    handleDelete(index, row) {
      let id = row.user_id;
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.myaxios
            .post("http://housekeepi.com/api/admin/userAccountDelete", {
              token: this.loginToken,
              id,
            })
            .then((success) => {
              this.handleCurrentChange(this.currentPage);
              this.$message({
                type: "success",
                message: success.data.msg,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      console.log(index, row);
    },
    //分页器
    handleCurrentChange(val) {
      this.currentPage = val;
      this.myaxios
        .post("http://housekeepi.com/api/admin/userList", {
          token: this.loginToken,
          page: val,
          size: 7,
        })
        .then((success) => {
          this.total = success.data.data.count;
          this.list = success.data.data.data;
          this.list.forEach((element) => {
            if (element.user_type == 1) {
              element.user_type = "用户";
              element.work_type = "用户";
            } else if (element.user_type == 2) {
              element.user_type = "普通员工";
            }
            if (element.work_type == 1 && element.user_type == "普通员工") {
              element.work_type = "月嫂";
            } else if (
              element.work_type == 2 &&
              element.user_type == "普通员工"
            ) {
              element.work_type = "保洁";
            } else if (
              element.work_type == 3 &&
              element.user_type == "普通员工"
            ) {
              element.work_type = "家政";
            }
            element.create_time = new Date(
              element.create_time * 1000
            ).toLocaleString();
            element.last_login_time = new Date(
              element.last_login_time * 1000
            ).toLocaleString();
            if (element.sex == 1) {
              element.sex = "男";
            } else if (element.sex == 2) {
              element.sex = "女";
            } else {
              element.sex = "保密";
            }
          });
        });
      console.log(`当前页: ${val}`);
    },
    //禁用状态
    changeSwitch(row) {
      this.myaxios
        .post("http://housekeepi.com/api/admin/userAccountBan", {
          token: this.loginToken,
          id: row.user_id,
        })
        .then((success) => {});
    },
    //审核
    changeSwitch2(row) {
      this.myaxios
        .post("http://housekeepi.com/api/admin/userWorkState", {
          token: this.loginToken,
          id: row.user_id + "",
          state: row.state,
        })
        .then((success) => {});
    },
  },
  mounted() {
    this.loginToken = localStorage.getItem("loginmsg");
    this.myaxios
      .post("http://housekeepi.com/api/admin/userList", {
        token: this.loginToken,
        page: 1,
        size: 7,
      })
      .then((success) => {
        this.total = success.data.data.count;
        this.list = success.data.data.data;
        this.list.forEach((element) => {
          if (element.user_type == 1) {
            element.user_type = "用户";
            element.work_type = "用户";
          } else if (element.user_type == 2) {
            element.user_type = "普通员工";
          }
          if (element.work_type == 1 && element.user_type == "普通员工") {
            element.work_type = "月嫂";
          } else if (
            element.work_type == 2 &&
            element.user_type == "普通员工"
          ) {
            element.work_type = "保洁";
          } else if (
            element.work_type == 3 &&
            element.user_type == "普通员工"
          ) {
            element.work_type = "家政";
          }
          element.create_time = new Date(
            element.create_time * 1000
          ).toLocaleString();
          element.last_login_time = new Date(
            element.last_login_time * 1000
          ).toLocaleString();
          if (element.sex == 1) {
            element.sex = "男";
          } else if (element.sex == 2) {
            element.sex = "女";
          } else {
            element.sex = "保密";
          }
        });
      });
  },
};
</script>

<style scoped>
.contorl {
  background: rgba(72, 126, 176, 0.4);
  padding: 10px 0 10px 15px;
}
.page {
  margin: 5px 10px 0 0;
  float: right;
}
</style>